
<!DOCTYPE html>
<html>
	<head>
		<title>注册-国风汉服</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="../css/login_reg.css" />
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
	</head>

	<body id="sign_whole">
		
		<div id="reg_wrap">
			<div id="top_content">
					
				<div id="content">
					<h2>用户注册</h2>
					<form id="form-reg">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<p>
								<span class="left_font" >
									用&nbsp;户&nbsp;名&nbsp;: 
								</span>
								<span class="right_input">
									<input type="text" class="inputgri" 
									name="username" />
								</span>
							</p>
							<p>
								<span class="left_font" >
									密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
								</span>
								<span class="right_input">
									<input type="password" 
									class="inputgri" name="password" />
								</span>
							</p>
							<p>
								<span class="left_font" >
									确认密码:
								</span>
								<span class="right_input">
									<input type="password" 
									class="inputgri" name="againpwd" />
								</span>
							</p>
							<p>
								<span class="left_font" id="myemail">
									邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:
								</span>
								<span class="right_input">
									<input type="text" 
									class="inputgri" id="email" name="email" />
								</span>
								<span class="right_input">
									<input type="button"
									 id="getCode" value="发送验证" onclick="sendMessages()" />
								</span>
							</p>
							<p>
								<span class="left_font" >
									验&nbsp;证&nbsp;码&nbsp;:
								</span>
								<span class="right_input">
									<input type="text" 
									class="inputgri" name="rpcode" id="rpcode" />
									<!-- 保存验证码 -->
      							<input type="text" id="code"  hidden="true">
								</span>
							</p>
						</table>
						<div id="btnn">
							<input type="button"  id="btn-reg" class="button" value="注册" />&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="login.html"><input type="button" class="button" value="登录" /></a><br>
							<a href="../index.html" style="font-size: xx-small">回到首页</a>
						</div>
					</form>
				</div>
			</div>
		</div>

		<script type="text/javascript">
            $("#btn-reg").click(function () {
                //验证码是否正确
                if(validateCode()) {
                    return;
                }
                var url = "../user/reg.do";
                var data =$("#form-reg").serialize();

                console.log("注册参数："+data);
                //发出ajax请求并处理结果。
                $.ajax({
                    "url":url,
                    "data":data,
                    "type": "POST",
                    "dataType":"json",
                    "success":function (json) {
                        if(json.state == 200){
                            alert("注册成功,去登录！");
                            window.location.href = "login.html";
                        }else{
                            alert(json.message);
                        }
                    }
                });
            });

            var InterValObj; //timer变量，控制时间
            var count = 90; //间隔函数，1秒执行
            var curCount; //当前剩余秒数
            var code = ""; //验证码
            var codeLength = 4; //验证码长度
            function sendMessages() {
                curCount = count;
                var email = $("#email").val();
                if(validateEmail(email)) {
                    return;
                }
                if(email != "") {
                    //设置button效果，开始计时
                    $("#getCode").attr("disabled", "true");
                    $("#getCode").val(curCount + "秒后重试");
                    InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器，1秒执行一次
                    //向后台发送处理数据
                    $.ajax({
                        url: "../user/sendCode",
                        dataType: "json",
                        type: "POST",
                        data: "email=" + email,
                        success: function(json) {
                            if (json.state==200){
                                //保存验证码
                                $("#code").val(json.message);
                                console.log(json.message);
                                alert("验证码发送成功！");
							}else{
                                alert(json.message);
							}

                        }
                    });
                } else {
                    alert("邮箱不能为空！！！！！！");
                }
            }
            //timer处理函数
            function SetRemainTimes() {
                if(curCount == 0) {
                    window.clearInterval(InterValObj); //停止计时器
                    $("#getCode").removeAttr("disabled"); //启用按钮
                    $("#getCode").val("重新发送验证码");
                    code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
                } else {
                    curCount--;
                    $("#getCode").val(curCount + "秒后重试");
                }
            }

            //验证邮箱
            function validateEmail(email) {
                if(email == '') {
                    alert("请先填写邮箱");
                    return true;
                }
                return false;
            }
            //验证码非空和错误验证
            function validateCode() {
                var email = $("#email").val();
                var code = $("#code").val();
                var rpcode = $("#rpcode").val();
                if(validateEmail(email)) {
                    return true;
                }
                if(code == '') {
                    alert("请先获取验证码!");
                    return true;
                }
                if(rpcode == '' || code != rpcode) {
                    alert("验证码输入错误！");
                    return true;
                }
                /*alert(code != rpcode);  */
                return false;
            }

		</script>

	</body>
</html>
